<style scoped>
.panel-shadow-outset {
  /* display: inline-block; */
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.panel-shadow-outset:hover,
.panel-shadow-outset:focus,
.panel-shadow-outset:active {
  box-shadow: 1px 2px 2px #dddee1;
  background: #eaf4fe;
  border: 1px solid #2d8cf0;
}
.card-panel {
  border: 1px solid #dddee1;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: relative;
  padding: 5px;
  margin: 5px;
  background: #fff;
  z-index: 2;
  /* width:330px; */
  /* height:200px; */
}
</style>

<template>
  <div class="hello">
    <Row :gutter="12">
        <Col span="8">

            <Tabs value="name1">

                <TabPane label="布控规则添加" name="name1">
                    <Form :model="vehicleInfo" label-position="right" :label-width="64">
                        <FormItem label="车牌号">
                            <Input v-model="vehicleInfo.number" style="width: 100%"></Input>
                        </FormItem>

                        <FormItem label="车牌段">
                            
                        </FormItem>
                        <FormItem label="车牌颜色">
                            <CheckboxGroup v-model="vehicleInfo.color">
                                <Checkbox label="白" value="A"></Checkbox>
                                <Checkbox label="黄" value="C"></Checkbox>
                                <Checkbox label="蓝" value="H"></Checkbox>
                                <Checkbox label="黑" value="J"></Checkbox>
                            </CheckboxGroup>
                        </FormItem>
                        <FormItem label="车牌类型">
                            <Select v-model="vehicleInfo.plateType" style="width: 100%">
                                <Option v-for="item in vehiclePlateType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select> 
                        </FormItem>
                        <FormItem label="车身颜色">
                            <CheckboxGroup v-model="vehicleInfo.color">
                                <Checkbox label="白" value="A"></Checkbox>
                                <Checkbox label="灰" value="B"></Checkbox>
                                <Checkbox label="黄" value="C"></Checkbox>
                                <Checkbox label="粉" value="D"></Checkbox>
                                <Checkbox label="红" value="E"></Checkbox>
                                <Checkbox label="紫" value="F"></Checkbox>
                                <Checkbox label="绿" value="G"></Checkbox>
                                <Checkbox label="蓝" value="H"></Checkbox>
                                <Checkbox label="棕" value="I"></Checkbox>
                                <Checkbox label="黑" value="J"></Checkbox>
                                <Checkbox label="其他" value="Z"></Checkbox>
                            </CheckboxGroup>
                        </FormItem>
                        <FormItem label="车辆类型">
                            <Select v-model="vehicleInfo.type" style="width: 100%">
                                <Option v-for="item in vehicleType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select> 
                        </FormItem>
                        <FormItem label="行使超速">
                            <Slider v-model="vehicleInfo.speed" show-input value="40"></Slider> 
                        </FormItem>
                        
                    </Form>

                    <Button type="primary" @click="search" long >添加布控规则</Button>

                </TabPane>
                <TabPane label="布控规则信息" name="name2">
                    <div v-for="item in page.data" v-bind:key="item.id" class="card-panel panel-shadow-outset">
                        <p>{{item.info.routeLabel}}</p>
                        <p>{{item.info.timeLabel}}</p>
                        <p>{{item.info.times}}小时 | {{item.info.distance}}公里 | -- km/h</p>
                    </div>
                    <Page :current="1" :total="page.total" :page-size="5" simple show-total show-sizer style="text-align:right"></Page>
                </TabPane>

            </Tabs>

        </Col>
        <Col span="16" >
            <!-- <routeMapView ref="routeMapView"/> -->
            <Table border :columns="columns7" :data="data6"></Table>
        </Col>
    </Row>
  </div>
</template>

<script>

import axios from "axios";
import VueAxios from "vue-axios";

export default {
  name: "VechileRoute",
  data() {
    return {
        vehicleType: [
            {
                value: 'K30',
                label: '小型汽车'
            },
            {
                value: 'K16',
                label: '大型汽车'
            },
            {
                value: 'B10',
                label: '挂车'
            },
            {
                value: 'M01',
                label: '普通摩托车'
            },
            {
                value: 'H00',
                label: '低速车'
            },
            {
                value: 'M02',
                label: '轻便摩托车'
            },
            {
                value: 'T00',
                label: '原农机号牌'
            },
            {
                value: 'X99',
                label: '其他号牌'
            },
            {
                value: 'Z99',
                label: '无号牌'
            },
            {
                value: 'Y99',
                label: '教练汽车'
            }         	
        ],
        vehiclePlateType:[
            {
                value: "0",
                label: "无类型"
            },
            {
                value: "1",
                label: "92式民用车"
            },
            {
                value: "2",
                label: "警用车"
            },
            {
                value: "3",
                label: "上下军车"
            },
            {
                value: "4",
                label: "92式武警车"
            },
            {
                value: "5",
                label: "左右军车"
            },
            {
                value: "7",
                label: "02式个性化车"
            },
            {
                value: "8",
                label: "黄色双行尾牌"
            },
            {
                value: "9",
                label: "04式新军车"
            },
            {
                value: "10",
                label: "使馆车"
            },
            {
                value: "11",
                label: "一行结构的新WJ车"
            },
            {
                value: "12",
                label: "两行结构的新WJ车"
            },
            {
                value: "13",
                label: "黄色1225农用车"
            },
            {
                value: "14",
                label: "绿色1325农用车"
            },
            {
                value: "15",
                label: "黄色1325农用车"
            },
            {
                value: "16",
                label: "摩托车"
            },
            {
                value: "100",
                label: "教练车"
            },
            {
                value: "101",
                label: "临时行驶车"
            },
            {
                value: "102",
                label: "挂车"
            },
            {
                value: "103",
                label: "领馆汽车"
            },
            {
                value: "104",
                label: "港澳入出车"
            },
            {
                value: "105",
                label: "临时入境车"
            }
        ],
        vehicleInfo: {
            vehicleNumber: "陕K8D880"
        },
        page: {},
        columns7: [
            {
                title: 'Name',
                key: 'name',
                render: (h, params) => {
                    return h('div', [
                        h('Icon', {
                            props: {
                                type: 'person'
                            }
                        }),
                        h('strong', params.row.name)
                    ]);
                }
            },
            {
                title: 'Age',
                key: 'age'
            },
            {
                title: 'Address',
                key: 'address'
            },
            {
                title: 'Action',
                key: 'action',
                width: 150,
                align: 'center',
                render: (h, params) => {
                    return h('div', [
                        h('Button', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.show(params.index)
                                }
                            }
                        }, 'View'),
                        h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: () => {
                                    this.remove(params.index)
                                }
                            }
                        }, 'Delete')
                    ]);
                }
            }
        ],
        data6: [
            {
                name: 'John Brown',
                age: 18,
                address: 'New York No. 1 Lake Park'
            },
            {
                name: 'Jim Green',
                age: 24,
                address: 'London No. 1 Lake Park'
            },
            {
                name: 'Joe Black',
                age: 30,
                address: 'Sydney No. 1 Lake Park'
            },
            {
                name: 'Jon Snow',
                age: 26,
                address: 'Ottawa No. 2 Lake Park'
            }
        ],
        msg: "Welcome to Your Vue.js App"
    };
  },
  methods: {
    search() {
      //alert("12232321321");
    },
    show (index) {
        this.$Modal.info({
            title: 'User Info',
            content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
        })
    },
    remove (index) {
        this.data6.splice(index, 1);
    }
  },
  created: function() {
    axios.get("/api/traffics").then(response => {
      var data = response.data;
      var page = {};
      page.total = data.total;
      page.data = data.data.slice(0, 5);
      this.page = page;
    });
  }

};
</script>
